<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title=""
      width="80%"
      @close="handleCancel"
    >
      <el-button type="primary" v-print="print">打印</el-button>
      <div id="printBox" v-loading="loading">
        <div class="title">
          <h2 class="title-left">经典印务成品发货单</h2>
          <div style="width: 300px">发货单号: {{ form.code }}</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="9">
            库户名称: <span class="line">{{ form.customName }}</span></el-col
          >
          <el-col :span="9">
            发货日期:
            <span class="line">{{
              form.deliveryDate?.split("T")[0] ?? ""
            }}</span></el-col
          >
          <el-col :span="6">
            合计:
            <span>{{ quantity }}</span></el-col
          >
        </el-row>
        <table
          border="2"
          cellspacing="0"
          cellpadding="6"
          style="width: 100%; margin-top: 10px"
        >
          <tr>
            <th class="text" style="width: 120px">生产通知单号</th>
            <th class="text" style="width: 400px">产品名称</th>
            <th class="text" style="width: 80px">包数</th>
            <th class="text" style="width: 80px">每包数量</th>
            <th class="text" style="width: 80px">零头</th>
            <th class="text" style="width: 100px">数量</th>
            <th class="text" style="width: 200px">备注</th>
          </tr>
          <tr v-for="item in deliveryDetailList" :key="item.id">
            <td class="text">
              {{ item.produceNo }}
            </td>

            <td class="text">
              {{ item?.productName }}
            </td>
            <td class="text">
              {{ item.packNum }}
            </td>
            <td class="text">
              {{ item.packInNum }}
            </td>
            <td class="text">
              {{ item.zeroNum }}
            </td>
            <td class="text">
              {{ item.quantity }}
            </td>
            <td class="text">
              {{ item.remark }}
            </td>
          </tr>
        </table>
        <el-row :gutter="20" style="margin: 10px 0">
          <el-col :span="9">
            制单人: <span class="line">{{ form.createBy }}</span></el-col
          >
          <el-col :span="9">
            制单日期:
            <span class="line">{{
              form.createTime?.split("T")[0]
            }}</span></el-col
          >
          <el-col :span="6"> 客户签字: </el-col>
        </el-row>
        <table
          border="2"
          style="border-bottom: 0"
          cellspacing="0"
          cellpadding="6"
        >
          <tr>
            <td class="text" style="width: 150px">不配套图书</td>
            <td class="text" style="width: 150px">单号</td>
            <td class="text" style="width: 300px">{{ produceNo }}</td>
          </tr>
        </table>
        <table
          border="2"
          v-if="listBPT.length > 0"
          cellspacing="0"
          cellpadding="6"
          style="width: 100%"
        >
          <tr>
            <td class="text" style="width: 80px">品种</td>
            <td
              class="text"
              v-for="(item, index) in listBPT"
              :key="index"
              width="160"
            >
              {{ item.name }}
            </td>
          </tr>
          <tr>
            <td class="text" style="width: 80px">数量</td>
            <td class="text" v-for="(item, index) in listBPT" :key="index">
              {{ item.val }}
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(["cancel"]);
import { getDeliveryById } from "@/api/production/invoice.js";
const {
  ems_produce_new_past,
  ems_machine_info_size,
  ems_produce_hykb,
  mes_paper_material,
  mes_paper_specs,
  ems_produce_package_require,
  mes_paper_unit,
  ems_produce_print_colour_type,
  ems_produce_color,
  ems_produce_is_new,
  mes_paper_type,
  ems_workshop_subject_type,
  ems_order_make_up,
  ems_order_breed_type,
  ems_order_print_color,
  ems_produce_paper_size,
  ems_produce_cover_film,
  ems_produce_marking,
  ems_machine_info_waste_rate,
} = proxy.useDict(
  "ems_machine_info_waste_rate",
  "ems_produce_new_past",
  "mes_paper_unit",
  "ems_produce_package_require",
  "mes_paper_specs",
  "mes_paper_material",
  "ems_produce_hykb",
  "ems_machine_info_size",
  "ems_produce_color",
  "ems_produce_print_colour_type",
  "ems_produce_is_new",
  "ems_produce_paper_size",
  "ems_produce_cover_film",
  "ems_produce_marking",
  "mes_paper_type",
  "ems_order_print_color",
  "ems_order_make_up",
  "ems_workshop_subject_type",
  "ems_order_breed_type"
);
const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: "",
  },
});
const produceNo = ref("");
const quantity = ref(0);
//这里是打印的配置项
const print = ref({
  id: "printBox", //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  fitToPage: true,
  // extarCss: `@page { size: auto;  margin: 20mm; } @media print { body { zoom: 0.6; } }`,
  style: `@page { size: auto;  margin: 20mm; zoom: 66%; }`, // 设置缩放比例为100%
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "山东经典印务生产通知单(封面)", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    emit("cancel");
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});
const data = reactive({
  deliveryDetailList: [],
  form: {},
});
const dataList = ref([]);
const listBPT = ref([]);
const loading = ref(true);
const { form, deliveryDetailList } = toRefs(data);

watch(
  () => props.id,
  (val) => {
    if (val) {
      loading.value = true;
      getDeliveryById({ id: props.id }).then((res) => {
        if (res.data.irregularBooks) {
          const resp = JSON.parse(res.data.irregularBooks);
          listBPT.value = resp.listBPT;
          listBPT.value.forEach((item) => {
            if (item.val == 0) {
              item.val = "";
            }
          });
          console.log(resp);
          produceNo.value = resp.produceNo;
        }
        Object.assign(form.value, { ...res.data });
        deliveryDetailList.value = res.data.deliveryDetailList;
        quantity.value = res.data.deliveryDetailList.reduce((prev, item) => {
          return (prev += Number(item.quantity));
        }, 0);
        loading.value = false;
      });
    }
  }
);

const handleCancel = () => {
  dataList.value = [];
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.printBox {
  font-size: 9px !important;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-left {
    text-align: center;
    flex: 1;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table,
th,
td {
  border: 1px solid #181616;
}

th,
td {
  padding: 8px;
  text-align: center;
}

// th {
//   background-color: #f2f2f2;
// }
@media print {
  table {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 假设您的内容主体在一个类为 `.content` 的元素内 */
  .content {
    /* 防止内容内部断开到下一页 */
    page-break-inside: avoid;

    /* 在每个奇数页末尾强制分页 */
    &:nth-of-type(odd) {
      page-break-after: always;
    }
  }
}
.print-box {
  page-break-before: always;
}

.text {
  font-weight: 400;
}
.line {
  border-bottom: 1px solid #181616;
}
</style>
